<template>
    <view class="main">
    <view class="bg-set"></view>
   <view class="home_notice">
    <uni-notice-bar show-icon scrollable speed="50"
				:text=AnnouncementInfo />
   </view>
    <image src="https://bpic.588ku.com/back_pic/06/00/38/435facfb170fe13.jpg" class="home_img"/>
  <view class="scroll_home">
        <!-- 头部信息展示 -->
        <view class="headerbox">
      <view class="header">
        <!-- 头像 -->
          <image src="../../static/images/login-logo.jpg" class="avatar"/>
        <view class="txtstyle">
          <navigator url="/pages/index/index?id=1" open-type="navigate" hover-class="navigator-hover">
            <view style="display: flex;align-items: center;">
              <text style="font-size: 40rpx;font-weight: 700;margin-bottom: 15rpx;">{{store.profile?.customerName }}</text>
                <text class="icon icon-xiangyoujiantou"></text>
            </view>
            <view>{{store.profile?.addressTxt}}</view>
          </navigator>
        
        </view>
      </view>
    </view>
    <!-- 中间两区域 -->
    <view class="middle">
      <view @click="onOrder">
        <view class="middle_left">
          <image src="../../static/images/index_1.png" class="img" />
          <text>餐厅订餐</text>
        </view>
      </view>
      <view class="line"></view>
      <navigator url="/pages/" open-type="navigate" hover-class="navigator-hover" @click="onShoping">
        <view class="middle_right">
          <image src="../../static/images/index_2.png" class="img" />
          <text>历史订单</text>
        </view>
      </navigator>
    </view>
    <!-- 中间四小区域 -->
    <view class="middle_four">
      <view class="middle_box" v-for="(item, index) in list" :key="index" @click="onClick" :mark:index="index">
          <view class="iconfont" :class="item.icon"></view>
        <view style="margin-top: 10rpx;">{{ item.text }}</view>
      </view>
    </view>

  </view>

   <!-- 底部 -->
 <view class="footer" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">该版权归玮炜信息所有</view>
  </view>
 
 
  <!--联系食堂-弹窗  -->
  <uni-popup ref="popupRef" type="bottom" background-color="#fff">
    <view class="popup">
      <view class="close" @click="onClose">关闭</view>
      <view class="popup_txt">
        <view>食堂电话：{{phone}}</view>
        <view class="call" @click="onCall">立即拨打</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { ref} from 'vue'
import { useMemberStore } from '../../stores';
import { http } from '../../utils/http';
// import global from '../../utils/websokect.js'//--------------------hsq修改
onShow(()=>{
  
  getSettingInfo()
  //  getSocket()//--------------------hsq修改
  getAnnouncementInfo()
  kk()
})
// 连接打印机
const getSocket=async()=>{
	global.localSocket();
	global.ws.onMessage((res) => {
		//监听 WebSocket 接受到服务器的消息事件
		const msgdata = JSON.parse(res.data);
		console.log(msgdata,'接受消息');	
		if(msgdata.ResCode=='0'){
			// getSocket()
		} else if( msgdata.ResCode=='1' ){
			console.log(msgdata,'接受消息成功');	
		} else {
			// wx.showModal({
			// 	content: '商家打印机异常，请联系工作人员',
			// 	confirmText: "确认",
			// 	cancelText: "取消",
			// 	success: function(res) {
			// 		//点击“确认”时打开设置页面
			// 	}
			// });
			console.log(msgdata,'打印机异常');	
		}
	});
}
// 测试用户信息是否有更新成功（无效的，不管）
const kk=async()=>{
await http({
  method:'post',
  url:'/GetCustomersInfo',
  data:{
    ...store.requestData
  }
})
}
// 获取用户信息
const store = useMemberStore()
const phone=ref('')
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取web端系统相关信息
const getSettingInfo=async()=>{
const {data}=await http({
  url:'/GetSettingInfo',
  method:'post',
  data:{
    ...store.requestData
  }
})
phone.value=data[1].settingItemValue
store.profile.stPhone=data[1].settingItemValue
}
// 获取通告数据中最新一条数据
const AnnouncementInfo=ref()
const getAnnouncementInfo=async()=>{
  const {data}=await http({
    url:'/GetAnnouncementInfo',
    method:'post',
    data:{
      ...store.requestData
    }
  })
 
  AnnouncementInfo.value= data.announcementDatas.sort((a,b)=>b.sysAnnouncementSerials-a.sysAnnouncementSerials)[0].announcementContent
}
const list = [
  { text: '意见反馈', class: 'blue', icon: 'iconyijianfankui' },
  { text: '我的订单', class: 'green', icon: 'icondingdan' },
  { text: '联系食堂', class: 'orange', icon: 'icontongxunlu' },
]
const popupRef = ref()
const onClick = (e) => {
  // 打开弹窗
  if (e.mark.index === 2) {
    popupRef.value.open()
  } if (e.mark.index === 0) {
    uni.navigateTo({ url: `/home_pkg/feedback/feedback` })
  } if (e.mark.index === 1) {
    uni.switchTab({ url: '/pages/order/order' })
  } 
}
// 关闭弹窗
const onClose = () => {
  popupRef.value.close()
}
// 立即拨打电话
const onCall = () => {
  uni.makePhoneCall({
    phoneNumber: phone.value
  })
}
// 点击餐厅订单跳转订单页
const onOrder = () => {
  uni.switchTab({ url: '/pages/table/table' })
}
// 点击历史订单
const onShoping = () => {
  uni.switchTab({ url: '/pages/order/order' })
}
</script>

<style scoped lang="scss">
.bg-set {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f1f1f1;
  z-index: -2;
}
.home_notice{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.home_img{
  position: fixed;
    width: 100%;
    height:430rpx;
    top: 0;
    left: 0;
    z-index:-1;
}
.main {
  width: 100%;
  // height: calc(100vh - 500rpx);
  margin-top: 400rpx;
  box-sizing: border-box;
 
.scroll_home{
  padding: 0 15rpx;
}
  .image {
    margin: 30rpx 0;
    width: 100%;
    height: 170rpx;
    border-radius: 12rpx;
  }

}

.headerbox {
  display: flex;
  align-items: center;
  height: 200rpx;
  margin: 40rpx 20rpx 15rpx;
  border-radius: 12rpx;
  background-color: #fff;

  .header {
    display: flex;
    align-items: center;

    .avatar {
      width: 125rpx;
      height: 125rpx;
      margin-left: 20rpx;
      border-radius: 50%;
      background-color: #fff;
    }

    .txtstyle {
      display: flex;
      flex-direction: column;
      margin-left: 15rpx;
      height: 100%;
      justify-content: space-around;
    }
  }

}

.middle {
  display: flex;
  width: 100%;
  height: 300rpx;
  justify-content: space-around;
  align-items: center;
  border-radius: 12rpx;
  background-color: #fff;

  .img {
    width: 230rpx;
    height: 194rpx;
  }

  .line {
    width: 2rpx;
    height: 160rpx;
    background-color: #54b8ee;
  }

  .middle_left,
  .middle_right {
    display: flex;
    // flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.middle_four {
  display: flex;
  margin-top: 20rpx;
  width: 100%;
  .middle_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 200rpx;
    border-radius: 12rpx;
    background-color: #fff;
    margin-right: 10rpx;
    .middle_sbox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 10rpx;
      border-radius: 50%;
      font-size: 80rpx;
    }
  }

  .middle_box:last-child {
    margin-right: 0;
  }
}

.footer {
  margin-top: 80rpx;
  width: 100%;
  height:150rpx;
  line-height: 150rpx;
  text-align: center;
  font-size: 34rpx;
  background-color: #fff;
}

.popup {
  width: 100%;
  height: 260rpx;
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;

  .close {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
  }

  .popup_txt {
    display: flex;
    width: 100%;
    margin-top: 80rpx;
    margin-bottom: 40rpx;
    justify-content: center;
    align-items: center;

    .call {
      width: 200rpx;
      height: 60rpx;
      border-radius: 24rpx;
      line-height: 60rpx;
      margin-left: 20rpx;
      color: #fff;
      text-align: center;
      background-color: #2979ff;
    }
  }
}

.blue {
  background-color: #2979ff;
}

.green {
  background-color: #009688;
}

.purple {
  background-color: #8c50ff;
}

.orange {
  background-color: #e59535;
}</style>